<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesPmJtmanagerTable"
      >
      </ele-page>
    </div>

    <!-- 恢复按钮的抽屉-->
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formResumeDataDialog"
      v-bind="formResumeMinxinDialog"
      :request-fn="handleResumeSubmit"
      :visible.sync="visibleResume"
      :title="title"
    ></ele-form-drawer>

    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
    >
      <template v-slot:prodCode>
        <el-input v-model="formDataDialog.prodCode" readonly :placeholder="$t('mesPmJtmanager.selectMaterial')">
          <el-button slot="append" icon="el-icon-search" @click="baseGoodsDialogVisible = true"></el-button>
        </el-input>
      </template>
    </ele-form-drawer>

    <!-- 此组件放到与抽屉平级，理论上不需要修改 -->
    <ele-dialog-table
      :title="$t('mesGateProdWhite.materialQuery')"
      width="800px"
      :visible.sync="baseGoodsDialogVisible"
      :formConfig="baseGoodsSearchDialog"
      :column="baseGoodsDialogColumn"
      @getSelectData="getSelectBaseGoods"
      :getList="getBaseGoodsList"
      :hasFooter="hasBaseGoodsFooter"
    >
    </ele-dialog-table>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialogMinxin, formResumeMinxin, rowConfig } from './config'
import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  getProdCodeList,
  getLineCodeList,
  getFactoryCodeList,
  getIsCommonList,
  getStopStatusList
} from '@/api/configuration/mesPmJtmanager'
import { baseGoodsDialog } from './mixin'
export default {
  name: 'mesPmJtmanager',

  mixins: [formDescDialogMinxin, searchConfig, baseGoodsDialog, formResumeMinxin],
  data() {
    return {
      lineCodeList: [],
      prodCodeList: [],
      title: null,
      visible: false,
      visibleResume: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formResumeDataDialog: {},
      // searchConfig,
      operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'prodCode',
          label: $i18n.t('mesPmJtmanager.prodCode2'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('mesPmJtmanager.prodName'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'lineCode',
          label: $i18n.t('mesPmJtmanager.lineCode'),
          minWidth: 100,
          showOverflowTooltip: true
        },
        {
          prop: 'lineName',
          label: $i18n.t('mesPmJtmanager.lineName'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   minWidth: 120,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'responsePersion',
          label: $i18n.t('mesPmJtmanager.stopType'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'repairMethod',
          label: $i18n.t('mesPmJtmanager.repairMethod'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'resolvent',
          label: $i18n.t('mesPmJtmanager.resolvent'),
          minWidth: 150,
          showOverflowTooltip: true
        },
        // {
        //   prop: "sourceType",
        //   label: "数据来源",
        // },
        // {
        //   prop: "stopStatus",
        //   label: "停机标识",
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getStopStatusList()
        //     return list.data.result
        //   },
        // },
        {
          prop: 'stopStatus',
          label: $i18n.t('mesPmJtmanager.stopStatus'),
          minWidth: 120,
          showOverflowTooltip: true,
          render: (h, { row }) => {
            let dom = null
            if (row.stopStatus == 0) {
              dom = (
                <el-tag effect="dark" type="success">
                  {$i18n.t('mesPmJtmanager.recovered')}
                </el-tag>
              )
            } else if (row.stopStatus == 1) {
              dom = (
                <el-tag effect="dark" type="warning">
                  {$i18n.t('mesPmJtmanager.stopped')}
                </el-tag>
              )
            }

            return dom
          }
          // optionProp: {
          //   value: "value",
          //   label: "description",
          // },
          // option: async (data) => {
          //   const list = await getBomStatusList();
          //   return list.data.result;
          // },
        },
        {
          prop: 'prodVersion',
          label: $i18n.t('mesPmJtmanager.prodVersion'),
          minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'isCommon',
          label: $i18n.t('mesPmJtmanager.isCommon'),
          minWidth: 100,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getIsCommonList()
            return list.data.result
          }
        },
        // {
        //   prop: "remark",
        //   label: $i18n.t('common.remark'),
        // },
        // {
        //   prop: "createByName",
        //   label:  $i18n.t('common.createByName')
        // },
        // {
        //   prop: "createTime",
        //   label:  $i18n.t('common.createTime')
        // },
        {
          prop: 'updateByName',
          label: $i18n.t('common.updateByName'),
          width: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'updateTime',
          label: $i18n.t('common.updateTime'),
          width: 170
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      let { id } = data.rows[0] || { id: '' }
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {}
          this.visible = true
        },
        resume: () => {
          this.rowResume(id)
          this.visibleResume = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch',{name:$i18n.t('mesPmJtmanager.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
          })
        }
      }
      fnc[data.handleName]()
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle',{name:$i18n.t('mesPmJtmanager.name')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.visibleResume = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id
        ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
        : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    handleResumeSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formResumeDataDialog.id
        ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data }
        : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      params.data.stopStatus = 0
      console.log('-----=====-', params)
      this.doSubmit(params)
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    rowResume(id) {
      rowDetail(id).then((res) => {
        this.formResumeDataDialog = res.data.result
      })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  }
}
</script>
